<template>
  <v-md-editor
      v-model="text" @save="save"
      height="1000px"
      :disabled-menus="[]"
      @upload-image="uploadImage"
      @edit="edit"/>
</template>

<script>

import {ref} from "vue";
import 'github-markdown-css'
import {POST} from "../../api"; import {ElMessage} from "element-plus";

export default {
  name: "Editor",
  props: {
    text: {
      type: String,
      default: ""
    }
  },
  setup(props, ctx) {
    const text = ref("")
    // value 为纯文本，render 为渲染后的 html 内容
    const save = (value, render) => {
      // TODO 调用后端接口保存到数据库
      ctx.emit("articleText", value, render)
      console.log(render)
    }

    const uploadImage = (event, insertImage, files)  => {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files, insertImage);
      const formData = new FormData()
      formData.set("file", files[0])
      // formData.append("file", insertImage);
      POST("/article/upload/", formData).then(res => {
        console.log(res)

        // 此处只做示例
        insertImage({
          url: res.data,
          desc: '图片',
        });
      }).catch(err => {
        console.log(err)
      })

    }

    const edit = () => {
      console.log("re")
    }

    return {
      text,
      save,
      uploadImage,
      edit
    }
  }
}
</script>

<style scoped>

</style>